<template>
  <BasicDrawer
    v-bind="$attrs"
    :isDetail="true"
    :title="drawerTitle"
    :destroyOnClose="true"
    @visible-change="handleVisibleChange"
  >
    <!-- <template #titleToolbar>
      <a-button type="primary" @click="handleAdd"> 新增 </a-button>
    </template> -->
    <PageWrapper v-loading="loading" loading-tip="加载中...">
      <div class="p-4 p-4-tag">
        <div class="tag">
          <BasicTable
            @register="registerTable"
            :columns="columns"
            :dataSource="tableData"
            :canResize="false"
            :showIndexColumn="false"
            :striped="true"
            :bordered="true"
            :pagination="false"
            :actionColumn="hasPermission('7-2-updateElement') ? actionColumn : undefined"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'action'">
                <TableAction
                  :actions="[
                    {
                      label: '编辑',
                      ifShow: hasPermission('7-2-updateElement'),
                      onClick: (e) => {
                        e.stopPropagation();
                        handleEdit(record);
                      },
                    },
                  ]"
                />
              </template>
            </template>
          </BasicTable>
        </div>
      </div>
      <!-- 新增或编辑的弹窗 -->
      <modelByProductElements
        :info="detailForm"
        @register="registerByProductElements"
        @submit-success="handelUpateTable"
      />
    </PageWrapper>
  </BasicDrawer>
</template>

<script setup lang="ts">
  import { BasicDrawer } from '/@/components/Drawer';
  import { computed, ref, reactive } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { BasicTable, TableAction, useTable } from '/@/components/Table';
  import { BasicColumn } from '/@/components/Table/src/types/table';
  import { getproductelements } from '/@/api/formula/index';
  import { usePermission } from '/@/hooks/web/usePermission';
  import { useModal } from '/@/components/Modal';
  import modelByProductElements from '/@/views/project/formula/components/modelByProductElements.vue';

  const [registerTable] = useTable();
  const { hasPermission } = usePermission();
  const [
    registerByProductElements,
    { openModal: openModalByElements, closeModal: closeModalByElements },
  ] = useModal();
  const props = defineProps({
    info: {
      type: Object,
      default: () => {},
    },
  });
  let loading = ref(false);
  let tableData = reactive([]);
  let detailForm = reactive({
    type: 'add',
    data: {},
  });
  // 表格表头
  let columns: BasicColumn[] = [
    {
      title: '名称',
      dataIndex: 'Name',
    },
    {
      title: '值',
      dataIndex: 'Value',
    },
    {
      title: '描述',
      dataIndex: 'Description',
    },
  ];
  // 操作栏
  let actionColumn = {
    width: 90,
    title: '操作',
    dataIndex: 'action',
    // slots: { customRender: 'action' },
  };
  let drawerTitle = computed(() => {
    return `配方成分（${props.info.data.Name}）`;
  });
  // 新增或编辑成功事件
  function handelUpateTable() {
    detailForm.type = 'add';

    detailForm.data = {
      RecipeKey: props.info.data.RecipeKey,
      ProductKey: props.info.data.ProductKey,
    };
    closeModalByElements();
    getTableData();
  }
  //编辑
  function handleEdit(params) {
    detailForm.type = 'update';
    detailForm.data = {
      ...params,
      RecipeKey: props.info.data.RecipeKey,
      ProductKey: props.info.data.ProductKey,
    };
    openModalByElements();
  }

  async function getTableData() {
    try {
      loading.value = true;
      let res = await getproductelements([props.info.data.RecipeKey, props.info.data.ProductKey]);
      tableData = res;
      loading.value = false;
    } catch (error) {
      loading.value = false;
    }
  }
  // 显示回调
  function handleVisibleChange(visible) {
    if (visible) {
      getTableData();
    } else {
      tableData = [];
    }
  }
</script>

<style scoped lang="less">
  .p-4-tag {
    width: 100%;
    height: 100%;
    padding: 0px !important;

    .tag {
      position: relative;
      overflow: hidden;
      height: 100%;
      background-color: #fff;

      .pagination-box {
        z-index: 9;
        padding: 10px 5px;
        box-sizing: border-box;
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #fff;
      }
    }

    .tag::after {
      content: '';
      display: block;
      width: 100%;
      height: 45px;
    }
  }
</style>
